import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux'
import { Breadcrumb, Table, Space, Input, Button, Select, Switch } from 'antd';

import style from './style.module.css'

const JoinGoods = (props) => {
    const { Option } = Select;
    const { Search } = Input;

    let { getPinShop } = props
    // console.log(getPinShop, 'getPinShop');

    // 将时间倒序排列
    let timeList = getPinShop.sort((a, b) => {
        return b.time.split('-').join().localeCompare(a.time.split('-').join())
    })

    // console.log(timeList, '88');

    // 获取拼团数据
    useEffect(() => {
        getList()
    }, [])

    const getList = () => {
        props.dispatch({
            type: "get_pinShop"
        })
    }

    // 拼团商品表格
    const columns = [
        {
            title: '商品ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '商品图片',
            render: (text, record, index) => (
                <img src={record.img} alt="" />
            ),
        },
        {
            title: '商品简介',
            dataIndex: 'work',
            key: 'work',
        },
        {
            title: '成团人数',
            dataIndex: 'ren',
            key: 'ren',
        },
        {
            title: '购买数量限制',
            dataIndex: 'nummer',
            key: 'nummer',
        },
        {
            title: '结束时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '拼团状态',
            render: (text, record, index) => (
                <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked={record.status} onChange={() => handleSwitchChange(record)} />
            ),
        },
        {
            title: '活动状态',
            render: (text, record) => (
                <span>{record.status === 1 ? '进行中' : '已结束'}</span>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <a>编辑</a>
                    <a onClick={() => handleDelete(record)}>删除</a>
                </Space>
            ),
        },
    ];

    // 拼团状态
    function handleChange(value) {
        // console.log(value, '111');
        props.dispatch({
            type: "get_pinPinz",
            payload: {
                pinZ: value,
            }
        })
    }

    // 搜索
    const onSearch = (value) => {
        // console.log(value, '222')
        props.dispatch({
            type: "get_pinSearch",
            payload: {
                keyword: value,
            }
        })
    }

    // 删除
    const handleDelete = (data) => {
        // console.log(data.id);
        props.dispatch({
            type: "get_pinDelete",
            payload: {
                id: data.id,
            }
        })

        // 调用总数据--重新渲染
        getList()
    }

    // 开关状态事件
    const handleSwitchChange = (record) => {
        // console.log(record, 'record');
        props.dispatch({
            type: "get_pinSwitch",
            payload: {
                id: record.id,
                status: record.status
            }
        })

        // 调用总数据--重新渲染
        getList()
    }

    // 添加拼团商品
    const handleAdd = () => {
        // console.log(66);
        props.history.push('/layout/pinadd')
    }

    return (
        <div className={style.joinGoods_M}>
            <div className={style.joinGoods_header_M}>
                <Breadcrumb separator=">">
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item>营销</Breadcrumb.Item>
                    <Breadcrumb.Item>拼团管理</Breadcrumb.Item>
                    <Breadcrumb.Item>拼团商品</Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <div className={style.joinGoods_main_M}>
                <div className={style.main_M}>
                    <div className={style.main_Search_M}>
                        <span>拼团状态：
                            <Select defaultValue="请选择" style={{ width: 120 }} onChange={handleChange}>
                                <Option value="1">开启</Option>
                                <Option value="0">关闭</Option>
                            </Select>
                        </span>
                        <span>商品搜索：<Search placeholder="请输入商品名称" onSearch={onSearch} style={{ width: 200 }} /></span>
                        <span><Button type="primary" onClick={handleAdd}>添加拼团商品</Button></span>
                    </div>
                    <Table columns={columns} dataSource={timeList} rowKey='id' />
                </div>


            </div>
        </div>
    );
}
export default connect((state) => {
    return {
        getPinShop: state.getPinShop
    }
})(JoinGoods);
